<template>
    <div>
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入评论内容" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postcomment">点击评论</mt-button>
        <div class="comment-list" v-for="(item,i) in comment">
            <div class="comment-item">
                <div class="comment-title">第{{i+1}}楼:&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间：{{item.add_time|daterFormat}}</div>
                <div class="comment-content">{{item.content}}</div>
            </div>
        </div>
        <mt-button type="danger" plain size="large" @click="getmore">加载更多</mt-button>
    </div>
</template>



<script>
import {Toast} from "mint-ui"
export default {
    data(){
        return {
            pageindex:1,
            comment:[],
            msg:""
        }
    },
    
    created(){
        this.getcomment()
    },
    methods:{
        getcomment(){
            //获取评论内容
            this.$http.get("api/getcomments/"+this.id+"?pageindex="+this.pageindex).then(result=>{
               if(result.body.status===0){
                    this.comment =this.comment.concat(result.body.message) 
               }else{

               }
            })
        },
        getmore(){
            //点击加载更多
            this.pageindex++;
            this.getcomment()
        },
        postcomment(){
            if(this.msg.length<=0){
                return Toast("评论内容不能为空")
            }
            //点击发表更多
            this.$http.post("api/postcomment/"+this.id,{content:this.msg.trim()}).then(result=>{
                if(result.body.status===0){
                    this.comment.unshift({
                        user_name:"匿名用户",
                        add_time:new Date().toString(),
                        content:this.mag
                    })
                    this.msg=""
                }
            })
        }
       
    },
    props:["id"]
}
</script>
<style lang="">
.comment-title{
    background-color:gray;
    font-size:12px;
}   
.comment-content{
    font-size:14px;
    line-height:30px;
    padding-left:20px;
    height:40px;
}
</style>